<template xmlns="http://www.w3.org/1999/html">
  <div class="community" style="margin-bottom: 60px">
    <!--    1.页面头部-->
    <div>
      <div id="dv1">
        <van-row>
          <van-col span="8">
            <div style="font-size: 30px;margin-top: 13px;">社区</div>
          </van-col>
          <van-col span="8">
            <div>
              <router-link to="/chat">
                <div style="font-size: 30px;margin-top: 13px;">聊天室</div>
              </router-link></div>

          </van-col>
          <van-col span="8">
            <div style="margin-top: 15px;font-size: 30px">
              <router-link to="/publish">
                <van-icon name="wechat-moments"/>
              </router-link>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <!--    2.热议标题-->
    <div id="div-title">
      <h3 style="text-align: left;margin-left: 20px">热议</h3>
      <van-row gutter="20" v-for="m in msgs" style="margin: 15px" @click="updateHeat(m.id,this)">
        <van-col span="8">
          <div id="theme">

            <van-icon name="chat-o" color="#ee0a24"/>
            {{ m.title }}
          </div>
        </van-col>
        <van-col span="8"></van-col>
        <van-col span="8">
          <div id="people">
            {{ m.heat }}人围观
          </div>
        </van-col>
      </van-row>
    </div>
    <!--    3.讨论圈-->
    <van-pull-refresh v-model="refreshing" @refresh="refreshData()">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多"
          @load="loadData()"
      >
        <div v-for="c in circle" id="div-friend">
          <!--      头像-->
          <div>
            <van-row>
              <van-col span="5">
                <div style="margin-top: 20px">

                  <van-image round width="3rem" height="3rem"
                             :src="imgs"/>
                </div>
              </van-col>
              <!--      用户名-->
              <van-col span="10">
                <p style="margin-top: 20px;margin-bottom: 10px;text-align: left">{{ c.name }}</p>
                <p style="margin-top: 0px;text-align: left">{{c.ctime}}</p>
              </van-col>
              <!--      关注按钮-->
              <van-col span="9">
                <div style="margin-top: 20px;margin-left: 40px">
                  <van-button plain type="primary" id="lookbtn">
                    关注
                  </van-button>
                </div>
              </van-col>
            </van-row>
          </div>

          <div id="div-ft2">
            {{ c.content }}
          </div>
          <!--点赞按钮-->
          <div id="div-ft3">
            <van-row>
              <van-col span="8">
                <van-icon name="good-job-o" @click="like(c.id,this)" :color="col">
                  {{c.likenum}}
                </van-icon>
              </van-col>
              <van-col span="8">
                <van-icon name="chat-o" @click="remark(c.id,this)"/>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "CommunityView",
  data() {
    return {
      msgs: [
      ],
      circle: [
      ],
      loading:false,
      finished:false,
      refreshing:false,
      page:0,
      size:5,
      col:'',
      imgs:require("../assets/images/imgs-tx.png")
    }
  }, mounted() {
    //热议的请求接口
    this.axios.get("/api/topic/select.do").then(r=>{
      if(r.data.code==200){
        this.msgs=r.data.data;
      }
    })
  }, methods:{
    //下拉加载数据
    loadData(){
      setTimeout(()=>{
        this.loading=true;
        //接口请求
        this.axios.get("/api/circle/selectLimit.do?page="+this.page+"&size="+this.size).then(r=>{
          if(r.data.code==200){
            //成功
            for(var i in r.data.data){
              this.circle.push(r.data.data[i]);
            }
            this.loading=false;
            this.page=this.page+this.size;
            if(r.data.data.length<this.size){
              this.finished=true;
            }
          }else {
            this.loading=false;
          }
        });
      },1000);
    },
    //下拉加载是个摆设
    refreshData(){
      setTimeout(()=>{
        this.refreshing=true;
        for(var i=1;i<1;i++){
          this.circle.unshift({
          })
        }
        this.refreshing=false;
      },500);
    },
    //点击热门话题热度加1，只有第一次增加
    updateHeat(id){
      this.axios.get("/api/topic/update.do?tid="+id).then(r=>{
        //第一次查看这条热议
        if(r.data.code==200){
          //提醒接口是否管用，实际注释掉
          this.$toast("热度加1");
        }
        //第二次查看这条热议
        else {
          //提醒接口是否管用，实际注释掉
          this.$toast("以浏览过不在增加热度");
        }
        //将这条热议的id存储到VueX
        this.$store.commit("setTopicId",id);
        this.$router.push("/communityHeart")
      });
    },
    //点赞
    like(id){
      this.axios.get("/api/circle/updatelikenum.do?id="+id).then(r=>{
        if(r.data.code==200){
          this.$toast("点赞")
          //朋友圈的请求接口
          this.getData()
        }
        else if (r.data.code==400){
          this.$toast("取消点赞")
          //朋友圈的请求接口
          this.getData()
        }
      })
    },
    getData(){
      this.axios.get("/api/circle/query.do").then(r=>{
        if(r.data.code==200){
          this.circle=r.data.data;
        }
      })
    },

    remark(id){
      this.$store.commit("setRemarkId",id);
      this.$router.push("/remark")
    }
  }
}
</script>

<style scoped>
/*2.热议的*/
#div-title {
  background-color: ghostwhite;
}

/*话题的*/
#theme {
  text-align: left;
  margin: 3px;
}

/*人数显示的*/
#people {
  text-align: right;
  margin: 3px;
}

/*<!--    3.讨论圈-->*/
/*整体的*/
#div-friend {
  margin-top: 5px;
  margin-left: 5%;
  margin-right: 5%;
  border-style: solid;
  border-color: green;
  border-radius: 15px;
}

/*标题的*/
#div-ft1 {
  margin-left: 20px;
  text-align: left;
}

/*内容的*/
#div-ft2 {
  margin-left: 20px;
  font-size: 20px;
  text-align: left;
}

/*点赞按钮的*/
#div-ft3 {
  margin-top: 5px;
  font-size: 20px;
}

/*关注按钮的*/
#lookbtn {
  border-style: none;
  font-size: 20px;
  border-radius: 20px;
  background-color: #E9FAF4;
}
</style>
